<script>
import { defineComponent } from "vue";
import { userLogin } from "@/api/login";
import { ElMessage } from "element-plus";
import { Avatar, Lock, View } from "@element-plus/icons-vue";
// 只因
import kun from '@/assets/zhiyin.mp3'
export default defineComponent({
  data() {
    return {
      adminName: "admin",
      password: "123456",
      Avatar,
      Lock,
      View,
    };
  },
  methods: {
    sucessLogin() {
      //  非空校验
      if (this.adminName === "" || this.password === "") {
        return ElMessage.error("输入框不能为空");
      }

      //  规则校验
      if (!/^\w{4,8}$/.test(this.adminName)) {
        return ElMessage.error("用户名不符合规则");
      }
      if (!/^\d{4,8}$/.test(this.password)) {
        return ElMessage.error("密码不符合规则");
      }
      //发送登录请求
      userLogin({
        username: this.adminName,
        password: this.password,
      }).then((res) => {
        //存储token
        window.localStorage.setItem('token', res.data.data.token)
        this.$router.push("/home");

      });

      // console.log(this.adminName);
    },
    toggleSound() {
      let music = this.$refs.vd
      if (music.paused) {
        music.paused = false
        music.play()
      }
    }
  },
  mounted() {
    window.onload = function () {
      setInterval(() => {
        toggleSound()
      }, 1)
    }
  }
});
</script>

<template>
  <div class="aaa">

    <div class="login">
      <div class="demo">
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </div>
      <h1>Welcome!</h1>
      <el-input v-model="adminName" :prefix-icon="Avatar"></el-input>
      <el-input :prefix-icon="View" type="password" v-model="password" style="margin-bottom: 10px" />
      <el-button type="success" @click="sucessLogin">点击登录坤窝</el-button>
      <audio controls loop autoplay ref="vd">
        <source src="../assets/zhiyin.mp3 " />
      </audio>
    </div>
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

audio {
  position: fixed;
  top: 0;
  right: 0;
  display: none;
}

@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

.aaa {
  background: url('https://www.bing.com/th/id/OGC.3130dcefc0276340dc743e0842a5448d?pid=1.7&rurl=https%3a%2f%2fpic3.zhimg.com%2fv2-b5eb08bcfcf291020a6784ef6002d952_b.gif&ehk=2lIGSUqrTZixAlZlY7M8vUyuNWhNi6CON3OksNLy5JI%3d') no-repeat 100% 100% / 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login {
    width: 300px;
    height: 250px;
    font-size: 16px;
    color:skyblue;
    text-align: center;
    background-color: white;
    border-radius: 15px;
    padding: 5px 10px;
    .demo{
      padding-left: 0;
    }

    .el-input {
      margin-top: 20px;
      border-radius: 15px;
    }

    .el-button {
      width: 100%;

      border-radius: 15px;
    }
  }
}
</style>

